<template lang="">
  <div class="wow slideInLeft">

    <el-card class="box-card">
      <article-lists :AllArticle='AllArticle'></article-lists>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="page.currentPage" :page-sizes="[4,6,8]" :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="page.total" background>
      </el-pagination>
    </el-card>

  </div>
</template>
<script>
    import WOW from 'wowjs'
    //导入文章列表
    import ArticleLists from '@/components/list/index.vue'
    export default {
        data() {
            return {
                //分页
                page: {
                    currentPage: 1, // 当前页
                    total: 0, // 数据总条数
                    pageSize: 4 // 每页条数
                },
                //文章列表
                AllArticle: []
            }
        },
        components: {
            ArticleLists
        },
        methods: {
            //获取数据
            getlist() {
                this.$axios.get('/article', {
                    params: {
                        pageSize: this.page.pageSize,
                        currentPage: this.page.currentPage
                    }
                }).then(res => {
                    console.log(res.data);
                    this.page.total = res.data.count
                    this.AllArticle = res.data.result
                })
            },
            // 每页显示条数改变 就会触发这个函数
            handleSizeChange(val) {
                this.page.pageSize = val;
                this.getlist()
            },
            // 当前页码改变 就会触发这个函数
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.getlist()
            },
        },
        mounted() {
            this.getlist()
            let wow = new WOW.WOW({
                boxClass: 'wow',
                animateClass: 'animated',
                offset: 0,
                mobile: true,
                live: true
            });
            wow.init();
        },
    }
</script>
<style lang="less">

</style>